<template>
	<view class="certmain">
		<uni-nav-bar shadow title="" @clickLeft="back" height="88rpx" :border="false" :fixed="true"
			backgroundColor="#f8f8f8" :shadow="false" left-icon="left">
			<view class="input-view" style="background:#FFFFFF;width:2200rpx;">
				<uni-icons class="input-uni-icon" type="search" size="18" color="#999" />
				<input style="background:#FFFFFF;" confirm-type="search" class="nav-bar-input" type="text" placeholder="输入搜索关键词" @input="onInput" />
			</view>
		</uni-nav-bar>
		<view class="container" >
			<view class="headerTabs">
				<text v-for="(i,n) in level1" :class="current ==n?'activeNow':''"
					@click="ChangeOneLevel(i,n)">{{i.name}}</text>
			</view>
			<!-- 					<uni-segmented-control :current="current" :values="level1.name" :style-type="text"
						:active-color="activeColor" @clickItem="onClickItem" /> -->

			<view class="content">
				<view class="teainfo" v-for="(i,index) in AllList" :key="index">
					<view class="teatitle">
						<text class="t1">{{i.name}}</text>
						<!-- <text class="t2">更多></text> -->
					</view>
					<view class="teacon">
						<view class="tealeft" v-for="(item,index) in level3[index]"
							@tap="$wanlshop.on('/pages/teacher/ProcessVideo?id='+item.id)">
							<view class="timg">
								<image :src="item.image" mode=""></image>
							</view>
							<text class="tt1 u-line-1">{{item.name}}</text>
							<view class="tinfo">
								<!-- <text  class="yy">{{item.info}}</text> -->
								<view>
									<text class="yan" style="width: 24rpx;">
										<image style="width: 24rpx;" src="@/static/images/index/yan.png" mode="">
										</image>
									</text>
									<text>{{item.show_number}}</text>

								</view>

							</view>
						</view>
						<!-- <view v-show="item.length==0" style="text-align: center;  margin: 20rpx;" class="">
							暂无内容
						</view> -->
						<view v-show="level3List.length==0"
							style="text-align: center;width: 100%;line-height: 100px;  margin: 20rpx;" class="">
							暂无内容
						</view>

					</view>
				</view>
				<view v-if="AllList.length==0" style="text-align: center;  margin: 20rpx;" class="">
					暂无内容
				</view>

			</view>


		</view>
		
		<!-- <shopro-share v-model="showShare" :posterInfo="posterInfo" :posterType="''"></shopro-share> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: '',
				idcard: '',
				id: '1',
				AllList: [],
				showShare: false,
				styles: [{
						value: 'button',
						text: '按钮',
						checked: true
					},
					{
						value: 'text',
						text: '文字'
					}
				],
				colors: ['#007aff', '#4cd964', '#dd524d'],
				current: 0,
				colorIndex: 0,
				activeColor: '#007aff',
				styleType: 'button',
				level1: [],
				level3List: [],
				level3: [],
				keyWord: ''
			}
		},
		onLoad() {
			this.Levelone()
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			onInput(e) {

				this.keyWord = ''
				this.level3List = []
				this.level3 = []
				this.keyWord = e.target.value
				if (this.keyWord == '') {
					this.Levelone()
				} else {
					this.Levelone()
				}
			},
			Levelone() {
				this.$api.get({
					url: '/teach/firstCategory',
					success: res => {
						console.log(res)
						this.id = res[0].id
						this.level1 = res
						this.LevelTwo()
					},
					fail: error => {
						console.log(error)
					}
				})

			},
			ChangeOneLevel(i, n) {
				this.current = n
				this.id = i.id
				this.level3List = []
				// this.level3 = []
				this.LevelTwo()
			},
			LevelTwo() {
				uni.showLoading({
					title: '加载中'
				})
				this.$api.get({
					url: '/teach/secondCategory?id=' + this.id,
					success: res => {
						console.log(res)
						this.AllList = res
						this.AllList.forEach((item, n) => {
							this.getList(item.id, n)
						})
						uni.hideLoading()
					},
					fail: error => {
						console.log(error)
					}

				})
			},

			getList(id, n) {

				this.$api.get({
					url: '/teach/lst?limit=2&ppid=' + this.id + '&pid=' + id+ '&keyWord=' + this.keyWord,
					success: res => {
						console.log(res)
						this.level3List[n] = res.list
					},
					fail: error => {
						console.log(error)
					}
				})
				// this.$forceUpdate()ss

				setTimeout(() => {
					console.log(this.level3List)
					this.level3 = this.level3List
				}, 300)

			},
			
			toBookTea(item) {
				uni.navigateTo({
					url: '/pages/teacher/BookTea',

				})
			},
			// 分享回调
			wanlShare(e) {
				if (e) {
					this.$wanlshop.auth(`/pages/user/complaint/complaint?id=${this.goodsData.id}&type=3`);
				} else {
					this.modalName = null;
				}
			}
		}
	}
</script>

<style lang="scss">
	.certmain {


		width: 100%;
		background-color: #FFFFFF;
		padding-bottom: 40rpx;

		/deep/.uni-nav-bar-text {
			font-size: 36rpx;
			color: #333333;
			font-weight: 800;
		}
 /deep/.uni-navbar__header-btns-left{
            width: 20px !important;
        }
        /deep/.uni-navbar__header-btns-right{
            width: 0px !important;
        }
		.container {
			.teainfo {
				padding: 0 30rpx;

				.teatitle {
					display: flex;
					justify-content: space-between;
					margin-top: 30rpx;

					.t1 {
						font-size: 32rpx;
						font-weight: bold;
					}

					.t2 {
						font-size: 20rpx;
						font-weight: 400;
						color: #777777;
					}
				}

				.teacon {
					display: flex;
					justify-content: space-between;
					margin-top: 30rpx;
					flex-wrap: wrap;
					height: 300rpx;

					.tealeft,
					.tearight {
						width: 336rpx;
						height: 300rpx;
						background: rgba(255, 255, 255, 0.39);
						box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
						opacity: 1;

						.timg {

							image {
								width: 316rpx;
								height: 176rpx;
							}

							width: 316rpx;
							height: 176rpx;
							// background-color: pink;
							margin: 0 auto;
							margin-top: 10rpx;
						}

						.tt1 {
							display: block;
							margin-left: 10rpx;
							margin-top: 16rpx;
							font-size: 28rpx;
							color: #333333;
							font-weight: 400;
						}

						.tinfo {
							display: flex;
							justify-content: space-between;
							padding: 0 10rpx;
							margin-top: 14rpx;

							.yan,
							.san {
								display: inline-block;
								width: 16rpx;
								height: 20rpx;

								image {
									width: 100%;
									height: 100%;
								}
							}

							.san {
								margin-left: 30rpx;
							}

							.yy {
								width: 100rpx;
								height: 36rpx;
								font-size: 22rpx;
								color: #FFFFFF;
								background: rgba(231, 186, 119, 1);
								text-align: center;
								padding: 3rpx;
							}
						}
					}
				}
			}
		}
	}

	.headerTabs {
		padding: 30rpx;
		white-space: nowrap;
		overflow: scroll;

		text {
			margin-right: 50rpx;
		}

		.activeNow {
			font-size: 32rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #D6483D;
			position: relative;
		}

		.activeNow::after {
			width: 60rpx;
			height: 10rpx;
			background: #FFC1BC;
			border-radius: 6rpx 6rpx 6rpx 6rpx;
			opacity: 1;
			content: '';
			clear: both;
			position: absolute;
			bottom: -10rpx;
			left: 0;
			right: 0;
			margin: auto;
		}

	}
</style>
